<template>
    <div>
        <el-page-header content="添加用户" icon="" title="用户管理" />
        <el-form ref="userFormRef" :model="userForm" :rules="userFormRules" label-width="80px"
                    class="demo-ruleForm" >
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="userForm.username"/>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="userForm.password" type="password"/>
                    </el-form-item>

                    <el-form-item label="角色" prop="role">
                        <el-select v-model="userForm.role" class="m-2" placeholder="Select" style="width: 100%;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />

                        </el-select>
                    </el-form-item>

                    <el-form-item label="个人简介" prop="introduction">
                        <el-input v-model="userForm.introduction" type="textarea" />
                    </el-form-item>

                    <el-form-item label="头像" prop="avatar">
                        
                        <Upload :avatar="userForm.avatar" @kerwinchange="handleChange"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">
                           添加用户
                        </el-button>
                    </el-form-item>
        </el-form>
    </div>

    
</template>
<script setup>
import { computed, ref, reactive } from 'vue'
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
import router from '@/router';

const userForm = reactive({
    username:'',
    password: '',
    role:2,
    introduction:'',
    avatar:'',
    file: null,
    gender:0
})

const userFormRef = ref()

//一定要注意 属性的时态，复数形式
const userFormRules = reactive({
    username: [
        { 
            required: true, message: '请输入名字', trigger: 'blur' 
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    role: [
        { required: true, message: '请输入角色', trigger: 'blur' ,type:'number' }
    ],
    introduction: [
        { required: true, message: '请输入介绍', trigger: 'blur' }
    ],
    avatar: [
        { required: true, message: '请输入图形', trigger: 'blur' }
    ]
})

const options = [
    { label: "管理员", value: 1 }, { label: "编辑", value: 2 } 
]

const uploadAvatar = computed(()=>{
    //URL.createObjectURL 会生产blob 字符串
  return  userForm.avatar.includes("blob")?userForm.avatar:'http://localhost:3000'+userForm.avatar
})


const handleChange = (file)=>{
    console.log(file.raw)
    userForm.avatar = URL.createObjectURL(file)
    userForm.file= file
}

const submitForm =()=>{
    userFormRef.value.validate(async (valid)=>{
    //  console.log(valid)
     if(valid){
        //提交后台
        console.log(userForm)
        await upload("/adminapi/user/add",userForm)

        router.push(`/user-manage/userlist`)
     }
})
}

</script>
<style lang="scss" scoped>
.demo-ruleForm  {
    margin-top: 20px;

}


</style>